<template>
  <div class="app">
    <h1 v-color="'red'">app</h1>
    <input
      type="text"
      v-focus
    />
    <hr />
    <button @click="toggle">toggle</button>
    <Child v-if="isShow"></Child>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
import Child from './Child.vue'
export default {
  created() {
    console.log('options created')
  },
  mounted() {
    console.log('options mounted')
  },
  setup() {
    const isShow = ref(true)

    const toggle = () => {
      isShow.value = !isShow.value
    }
    onMounted(() => {
      console.log('compositionApi onMounted')
    })

    return {
      isShow,
      toggle
    }
  },
  components: {
    Child
  }
}
</script>
<style lang="scss" scoped></style>
